<template>
  <div class="main_spac1 paddingBottom5">
    <div class="main_white padding10 paddingBottom20">
      <div class="main_crumbs boxdq">
        <div class="main_crumbs_l">
          <a href="javascript:;" @click="$router.back(-1)">
            <i class="el-icon-arrow-down"></i>返回
          </a>
          <em>|</em>
          <span>发票记录</span>
        </div>
      </div>
      <div @click="mainor_ex = false">
        <div class="maincl">
          <div class="main_white padding10_new">
            <div class="mainor_form">
              <el-form
                :inline="true"
                :model="searchForm"
                class="demo-form-inline"
                ref="searchForm"
                label-width="70px"
              >
                <el-form-item label="发票日期" prop="date">
                  <el-date-picker
                    v-model="date"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changedate"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="发票号码" prop="invoice_code">
                  <el-input
                    class="wid220"
                    placeholder="请输入发票号码"
                    v-model="searchForm.invoice_code"
                  ></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="invoice_type">
                  <el-select
                    v-model="searchForm.invoice_type"
                    class="wid220"
                    placeholder="发票类型"
                  >
                    <el-option label="收票" value="1"></el-option>
                    <el-option label="出票" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <div class="clearfix"></div>
                <el-form-item class="marginTop10">
                  <el-button
                    class="reset marginLeft10"
                    type="primary"
                    @click="reset"
                    >重置</el-button
                  >
                  <el-button type="primary" @click="getData" :loading="loading"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <div class="main_table" style="min-height: 590px">
              <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                element-loading-text="加载中"
                fit
                border
                highlight-current-row
              >
                <el-table-column
                  align="center"
                  label="品名"
                  prop="goods_name"
                />
                <el-table-column
                  align="center"
                  label="发票日期"
                  prop="invoice_time"
                >
                  <template slot-scope="scope">
                    {{
                      moment(scope.row.invoice_time * 1000).format("YYYY-MM-DD")
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="发票号码"
                  prop="invoice_code"
                />

                <el-table-column
                  align="center"
                  label="开票单位"
                  prop="invoice_entity"
                />

                <el-table-column align="center" label="类型" prop="num" >
                <template slot-scope="scope">
                    {{ scope.row.type == 1 ? "收票" : "出票" }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="数量" prop="num" />
                <el-table-column align="center" label="单价" prop="unit" />
                <el-table-column align="center" label="金额" prop="money" />
                <el-table-column
                  align="center"
                  label="结余数量"
                  prop="residue_num"
                />
                <el-table-column align="center" label="备注" prop="remark" />
                <el-table-column
                  align="center"
                  label="创建时间"
                  prop="invoice_time"
                >
                  <template slot-scope="scope">
                    {{
                      moment(scope.row.created_at * 1000).format("YYYY-MM-DD")
                    }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="main_page boxdq">
              <div></div>
              <!-- 分页 -->
              <div class="main_page_r">
                <el-pagination
                  :current-page="current"
                  :page-sizes="[20, 30, 50, 100]"
                  :page-size="size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  background
                  @size-change="changeSize"
                  @current-change="changePage"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { invoice_logs } from "@/api/financial/bill";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import moment from "moment";
export default {
  data() {
    return {
      moment,
      title: "收票",
      dialogVisible: false,
      current: 1,
      size: 20,
      total: 0,
      loading: false,
      searchForm: {
        invoice_code: "",
        invoice_type: "",
        start_time: "",
        end_time: "",
      },
      tableData: [],
      goodsname: "",
      date: [],
    };
  },
  created() {
    let goodsname = this.$route.params.goodsname;
    if (goodsname) {
      this.goodsname = goodsname;
    }
    this.getData();
  },
  methods: {
    changedate() {
      this.searchForm.start_time = this.date[0];
      this.searchForm.end_time = this.date[1];
    },
    getData() {
      this.loading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        {
          page: this.current,
          per_page: this.size,
          goods_name: this.goodsname,
        },
        this.searchForm
      );
      invoice_logs(data).then((res) => {
        this.loading = false;
        if (!res.errcode) {
          this.total = res.data.total;
          this.tableData = res.data.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    changeSize(e) {
      this.size = e;
      this.getData();
    },
    changePage(e) {
      this.current = e;
      this.getData();
    },
    reset() {
      this.$refs.searchForm.resetFields();
      this.date = [];
      this.searchForm.start_time = "";
      this.searchForm.end_time = "";
      this.getData();
    },
  },
};
</script>

<style scoped lang='scss'>
/deep/.el-input__inner::-webkit-inner-spin-button,
/deep/.el-input__inner::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.status0 {
  color: #eb0a0a;
}
.status1 {
  color: #e6a23c;
}
.status2 {
  color: #03a98e;
}
.status3 {
  color: #999;
}
.padding10_new {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
</style>